<template>
	<el-switch class="state-switch" v-model="model" :loading="loading" :active-value="activeValue"
		:inactive-value="inactiveValue" :before-change="beforeChange" inline-prompt :active-text="activeText"
		:inactive-text="inactiveText" />
</template>
<script setup>

import { ref } from 'vue';

const emit = defineEmits(['before']),
	model = defineModel({ type: [Number, Boolean, String] });

const props = defineProps({
	id: {
		required: true,
		type: Number
	},
	activeValue: {
		type: [Number, Boolean, String],
		default: 1
	},
	inactiveValue: {
		type: [Number, Boolean, String],
		default: 0
	},
	activeText: {
		type: String,
		default: '已启用'
	},
	inactiveText: {
		type: String,
		default: '已禁用'
	}
});

let loading = ref(false)

const beforeChange = async () => {
	return new Promise((resolve) => {
		loading.value = true;
		emit('before', {
			id: props.id, complete: (res) => {
				loading.value = false;
				resolve(res)
			}
		})
	})
}
</script>
<style lang="scss" scoped>
.state-switch {
	--el-switch-on-color: #07c25b;
	--el-switch-off-color: #9b9999;

	:deep(.el-switch__core .el-switch__inner) {
		padding: 0 8px 0 calc(16px + 4px);
	}

	&.is-checked {
		:deep(.el-switch__core .el-switch__inner) {
			padding: 0 calc(16px + 4px) 0 8px;
		}
	}
}
</style>